export const option = {
    title: [
        {
            text: '检测进度',
            x: 'center',
            top: '46%',
            textStyle: {
                fontSize: 16,
                fontWeight: '300',
                color: 'rgba(255, 255, 255, 0.3)',
            }
        },
        {
            text: '60%',
            x: 'center',
            top: '30%',
            textStyle: {
                fontSize: 30,
                fontWeight: '300',
                color: '#fff',
            }
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        textStyle: {
            fontSize: 10
        },
    },
    color: ['#45494b', '#32b16c'],
    legend: {
        orient: 'vertical',
        left: 'center',
        bottom: 0,
        data: ['总应检样本数：15000,000,00', '已检测人员数：800,000,00'],
        textStyle: {
            color: '#fff'
        },
        itemGap: 15,
        itemWidth: 3,
        itemHeight: 15,
        align: 'auto',
        textStyle: {
            color: '#fff',
        },
     
    },
    angleAxis: {
        max: 100,
        show: false
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        }
    },
    polar: {
        radius: ["58%", "70%"],
        center: ['50%', '40%']
    },
    color: ["#2478b6", "#c2572d", "#66CCCC"],
    series: [
        {
            name: '总应检样本数：15000,000,00',
            type: 'bar',
            coordinateSystem: "polar",
            data: [100],
            barGap: '-100%',
            itemStyle: {
                color: '#45494b'
            }
        }, {
            name: '已检测人员数：800,000,00',
            type: 'bar',
            roundCap: true,
            coordinateSystem: "polar",
            data: [60],
            itemStyle: {
                color: '#32b16c'
            }
        }, {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.62,
                       startAngle:(230)*Math.PI /180,
                       endAngle:(50)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:2,
                        fill:'transparent'
                    },
                }
            }
        }, 
        {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.62,
                       startAngle:(60)*Math.PI /180,
                       endAngle:(220)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:2,
                        fill:'transparent'
                    },
                }
            }
        }, {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.61,
                       startAngle:(230)*Math.PI /180,
                       endAngle:(250)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:5,
                        fill:'transparent'
                    },
                }
            }
        }, 
        {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.61,
                       startAngle:(200)*Math.PI /180,
                       endAngle:(220)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:5,
                        fill:'transparent'
                    },
                }
            }
        },
        {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.61,
                       startAngle:(30)*Math.PI /180,
                       endAngle:(50)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:5,
                        fill:'transparent'
                    },
                }
            }
        }, 
        {
            name: '',
            type: 'custom',
            coordinateSystem: "none",
            data: [0],
            renderItem:function(params,api) {
                return {
                    type:'arc',
                    shape:{
                       cx:api.getWidth()/2,
                       cy:api.getHeight()/2-32,
                       r:Math.max(api.getWidth(),api.getHeight()) / 2 * 0.61,
                       startAngle:(60)*Math.PI /180,
                       endAngle:(80)*Math.PI /180
                    },
                    style:{
                        stroke:'#56595a',
                        lineWidth:5,
                        fill:'transparent'
                    },
                }
            }
        }
    ]
}

export function handlerOptions(chart, newConfig) {
    if (newConfig && (Object.keys(newConfig).length !== 0)) {
        chart.setOption({ ...newConfig }, false);
        console.log(chart.getOption());
    }

}